<template>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <span slot="oneRowName" slot-scope="text, record">
          <span v-if="text" class="oneRowName" :title="text">{{text}}</span>
        </span>
        <span slot="tag" slot-scope="text, record">
          <template v-if="text">
            <span class="tagSpan" v-for="(item,index) in text.split(',')">{{item}}</span>
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="downLoadFile(record)" v-if="record.PhotoUrl">下载附件</a>
        </span>
      </a-table>
      <div v-if="showLoading" style="position: fixed;
      top: 40vh;
      width: 100px;
      text-align: center;
      left: 47vw;
      background: rgba(0,0,0,.4);
      color: #ffffff;
      border-radius: 3px;
      height: 40px;
      line-height: 40px;">
          下载中...
        </div>
    </div>

</template>

<script>
  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  export default {
    name: "CompanyInteractiveList",
    mixins:[JeecgListMixin],
    components: {
        
    },
    props:{
      companyId:{
        type:String
      }
    },
    data () {
      return {
        // 表头
        columns: [
          {
            title: '附件名称',
            align:"center",
            dataIndex: 'PhotoUrl',
            customRender:function (t,r,index) {
              return t?JSON.parse(t).name:'';
            }
           },
           // {
           //  title: '附件上传日期',
           //  align:"center",
           //  dataIndex: 'Ts',
           //  sorter: (a, b) => a.Ts - b.Ts,
           //  customRender:function (t,r,index) {
           //    return t?new Date(parseInt(t)).toLocaleDateString().replace('/','-').replace('/','-'):'';
           //  }
           // },
       {
            title: '操作',
            dataIndex: '',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
           
		   
        ],
        isortercompany:{
        },
        showLoading:false,
		url: {
          list: "",
       },
    }
  },
    mounted(){
      this.url.list = '/companyVisit/queryRows';
      this.loadData();
    },
    methods: {
      downLoadFile(row){
        if(row.PhotoUrl){
          let url = JSON.parse(row.PhotoUrl).downloadUrl;
          // window.open('http://47.92.241.19:8900'+url)
          let timestamp=new Date().getTime();
          // 获取XMLHttpRequest
          let xmlResquest = new XMLHttpRequest();
          //  发起请求

          xmlResquest.open("GET", 'http://47.92.241.19:8900'+url, true);
          // 设置请求头类型
          xmlResquest.setRequestHeader("Content-type", "application/json");
          //  设置请求token
          xmlResquest.setRequestHeader(
          "tokenId",
          localStorage.getItem('token')
          );
          xmlResquest.responseType = "blob";
          //  返回
          let that = this;
          xmlResquest.onload = function(oEvent) {
            that.showLoading = false;
          let content = xmlResquest.response;
          // 组装a标签
          let elink = document.createElement("a");
          // 设置下载文件名
          elink.download = JSON.parse(row.PhotoUrl).name;
          elink.style.display = "none";
          let blob = new Blob([content]);
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
          };
          this.showLoading = true;
          xmlResquest.send();
          
        }
      },
      handleTableChange(pagination, filters, sorter) {
          //分页、排序、筛选变化时触发
          //TODO 筛选
          if (Object.keys(sorter).length > 0) {
              this.isortercompany.column = sorter.field;
              this.isortercompany.order = "ascend" == sorter.order ? "asc" : "desc"
          }
          this.epagination = pagination;
          this.loadData();
      },
      loadData(){
        let param = {PageIndex:this.epagination.current,pageSize:this.epagination.pageSize,conditions:[{
          "field":'Company',
          "operator":"=",
          "value":this.companyId
        },{
          "field": "PhotoUrl", 
          "operator": "like", 
          "value": "download"
        }]};
        // param.orders = [{field: this.isortercompany.column,desc: this.isortercompany.order == 'desc'?true:false}]
        this.$http.postAction(this.url.list, param).then((res) => {
            if (res.status == 1) {
                this.dataSource = res.data.rows;
                this.ipagination.total = res.data.totalCount;
            }else{
                this.$message.warning(res.message)
            }
            this.loading = false;
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>